<template>
  <view class="container">
    <view class="tui-chatroom-navigatorbar">
      <image
        class="tui-chatroom-navigatorbar-back"
        src="/static/static/assets/ic_back_white.svg"
        @tap="goBack"
      />
      <!-- 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID -->
      <view class="conversation-title">{{ conversationName }}</view>
    </view>
    <view class="group-profile">
      <TUI-group-profile
        v-if="isShow"
        id="groip-profile"
        :conversation="conversation"
      />
    </view>
    <view class="message-list" @tap="triggerClose">
      <TUI-message-list
        id="message-list"
        ref="messageList"
        :conversation="conversation"
      />
    </view>
    <view v-if="videoPlay" class="container-box" @tap.stop="stopVideoHander">
      <video
        v-if="videoPlay"
        class="video-message"
        :src="videoMessage.payload.videoUrl"
        :poster="videoMessage.payload.thumbUrl"
        object-fit="cover"
        error="videoError"
        autoplay="true"
        direction="0"
      />
    </view>
    <view v-if="showChat" class="message-input">
      <TUI-message-input
        id="message-input"
        ref="messageInput"
        :conversation="conversation"
        @sendMessage="sendMessage"
      />
    </view>
  </view>
</template>

<script>
import logger from '@/utils/logger'
import TUIMessageList from '@/components/tui-chat/message-list/index'
import TUIMessageInput from '@/components/tui-chat/message-input/index'
import TUIGroupProfile from '@/components/tui-group/group-profile/index'

const app = getApp()
export default {
  components: {
    TUIMessageList,
    TUIMessageInput,
    TUIGroupProfile,
  },
  props: {},
  data() {
    return {
      conversationName: '备注名',
      conversation: {},
      messageList: [],
      isShow: false,
      showChat: true,
      conversationID: '',
      videoPlay: false,
      videoMessage: {},
      config: {
        sdkAppID: '',
        userID: '',
        userSig: '',
        type: 1,
        tim: null,
      },
    }
  },
  created() {
    uni.$on('videoPlayerHandler', (value) => {
      this.videoPlay = value.isPlay
      this.videoMessage = value.message
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // conversationID: C2C、 GROUP
    logger.log(` TUI-chat | onLoad | conversationID: ${options.conversationID}`)
    const { conversationID } = options
    this.setData({
      conversationID,
    })
    uni.$TUIKit
      .setMessageRead({
        conversationID,
      })
      .then(() => {
        logger.log('TUI-chat | setMessageRead  | ok')
      })
    uni.$TUIKit.getConversationProfile(conversationID).then((res) => {
      const { conversation } = res.data
      this.conversation = conversation
	  this.conversationName= this.getConversationName(conversation)
      // this.setData({
      //   conversationName: this.getConversationName(conversation),
      //   isShow: conversation.type === 'GROUP',
      // })
    })
  },
  mounted() {},
  onUnload() {
    // #ifdef MP-WEIXIN
    //   this.$refs.TUICalling.destroyed();
    // // #endif
  },
  methods: {
    stopVideoHander() {
      this.videoPlay = false
    },
    getConversationName(conversation) {
      if (conversation.type === '@TIM#SYSTEM') {
        this.setData({
          showChat: false,
        })
        return '系统通知'
      }

      if (conversation.type === 'C2C') {
        return (
          conversation.remark ||
          conversation.userProfile.nick ||
          conversation.userProfile.userID
        )
      }

      if (conversation.type === 'GROUP') {
        return (
          conversation.groupProfile.name || conversation.groupProfile.groupID
        )
      }
    },

    sendMessage(event) {
		console.log("发送的消息",event.detail.message)
      // 将自己发送的消息写进消息列表里面
      this.$refs.messageList.updateMessageList(event.detail.message)
    },

    triggerClose() {
      if (this.showChat) {
        this.$refs.messageInput.handleClose()
      }
    },

    goBack() {
      const pages = getCurrentPages() // 当前页面栈

      if (
        pages[pages.length - 2].route ===
          'pages/TUI-Conversation/create-conversation/create' ||
        pages[pages.length - 2].route ===
          'pages/TUI-Group/create-group/create' ||
        pages[pages.length - 2].route === 'pages/TUI-Group/join-group/join'
      ) {
        uni.navigateBack({
          delta: 2,
        })
      } else {
        uni.navigateBack({
          delta: 1,
        })
      }

      uni.$TUIKit
        .setMessageRead({
          conversationID: this.conversationID,
        })
        .then(() => {})
    },
  },
}
</script>
<style>
@import './chat.css';
</style>
